<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script src="./../jquery/jquery 3.6.4.js"></script>
  <script>
    /* 
        let p1 = new Promise((resolve, reject) => {
          // setTimeout(function () {
          //   resolve("123")
          // }, 1000);
    
          // setTimeout(resolve, 1000, '123')
          // 接口的调用
          $.ajax({
            url: "/getAllDoctors", type: 'get',
            success(res) {
              if (res.code === 200) {
                resolve(res.data)
              } else {
                reject(res.msg)
              }
            }
          })
    
        });
        // console.log(p1);
        p1
          .then((result) => {
            console.log(result) //"123"  [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
            // 渲染表格
            // result.forEach()
            return result.length  // 返回一个总条数，   return 直接返回数据时，表示返回一个已兑现的结果。
          })
          .then(count => {
            console.log(count);
            let total = Math.ceil(count / 5);
            console.log(total); // 3
            // 分页的创建
            // for(){}
            return "逻辑执行ok"
          })
          .then(text => {
            console.log(text)
          })
          .catch(result => {  //只会处理前面的任意的Promise的已拒绝的状态。
            console.log(result)
          })
     */

    //  案例2：

    /*   new Promise((resolve, reject) => {
        setTimeout(resolve, 1000, "结果1")
      })
        .then(reuslt => {
          console.log("1") 
          // 只要在then()的回调函数里面，没有使用reject（）来表示已拒绝，则会一直执行所以的then（）
        })
        .then(reuslt => {
          console.log("2")
        })
        .then(reuslt => {
          console.log("3")
        })
        .catch(err => {
          console.log("fail")
        }); */

    //  "1","2","3"

    /*  new Promise((resolve, reject) => {
       setTimeout(resolve, 1000, "结果1")
     })
       .then(reuslt => {
         console.log("1")
         // 只要在then()的回调函数里面，没有使用reject（）来表示已拒绝，则会一直执行所以的then（）
       })
       .then(reuslt => {
         console.log("2")
         // Promise.reject("我挂了") // 没有return，程序只是抛出异常，catch（）不会处理异常的。
         return Promise.reject("我挂了") //添加return后，，catch()就可以处理reject()已拒绝的结果。
         // 当return 一个已拒绝的状态后，就会跳过塔后面所有的then(),找他后面第一个catch（）来处理这个结果。
       })
       .then(reuslt => {
         console.log("3")
       })
       .then(reuslt => {
         console.log("4")
       })
       .catch(err => {
         console.log("fail", err)
         // 业务逻辑的执行
 
       }); */

    //  “1”， “2”， “fail 我挂了”

    // 案例3：
    /* 
        new Promise((resolve, reject) => {
          setTimeout(resolve, 1000, "结果1")
        })
          .then(reuslt => {
            console.log("1")
          })
          .then(reuslt => {
            console.log("2")
            return Promise.reject("我挂了")
          })
          .then(reuslt => {
            console.log("3")
          })
          .then(reuslt => {
            console.log("4")
          })
          .catch(err => {
            console.log("fail", err) // '我挂了'
            // 业务逻辑的执行
            // failCount++;
            // if(failCount==5){
            // $.ajax()
            // }
            return Promise.resolve("5")
            // return Promise.reject("55555~~~挂了")
            // return "1000"
          })
          .then(result => {
            console.log(result); // '5' 如果上一个then（）里面没有使用return ，则result为undefined。
          })
          .catch(err => console.log(err))
          .finally(() => {
            console.log("不怕你们炒的兄，我是一个吃瓜的群众。");
          })
       */

    // 案例4：
    let p1 = new Promise((resolve, reject) => {
      $.ajax({
        url: "/getAllDoctors", type: 'get', success(res) {
          if (res.code === 200) {
            resolve(res.data)
          } else {
            reject('失败1')
          }
        }
      })
    });

    let p2 = new Promise((resolve, reject) => {
      $.ajax({
        url: "/getJobs", type: 'get', success(res) {
          if (res.code === 200) {
            resolve(res.data)
          } else {
            reject('失败2')
          }
        }
      })
    });

    /*   Promise.all([p1, p2])
        .then(res => {
          console.log(res); // [Array(13), Array(12)] 二维的数组 或 任意一个失败
          // 拼接数据 // 渲染表格   // 分页
        })
        .then(res => {
          // 渲染表格
        })
        .then(res => {
          // 分页
        })
        .catch(err => {
          console.log(err);
        }) */


    // Promise.any([p1, p2])
    //   .then(res => {
    //     console.log(res); // Array(13) || Array(12) 任意的已经兑现的结果
    //   })
    //   .catch(err => {
    //     console.log(err);
    //   });

    // Promise.race([p1, p2])
    //   .then(res => {
    //     console.log(res); // Array(13) || Array(12)|| 失败1 || 失败2 任意的已兑现或者已拒绝的结果

    //   })
    //   .catch(err => {
    //     console.log(err);
    //   });


    // 使用Promise封装一个AJAX, 不处理参数的问题

    const myAjaxGet = (obj = { url: "", type: 'get' }) => {
      let url = obj.url;
      let type = obj.type
      return new Promise((resolve, reject) => {
        let xhr = new XMLHttpRequest();
        xhr.open(type, url, true);
        xhr.send();
        xhr.onreadystatechange = function () {
          if (xhr.readyState === 4 && xhr.status === 200) {
            let text = xhr.responseText;
            // resolve(JSON.parse(text))
            let res = JSON.parse(text)
            if (res.code === 200) {
              resolve(res.data)
            } else {
              reject(res.msg)
            }
          }
        }
      });
    }

    let res = myAjaxGet({ url: "/getJobs", type: 'get' })
    // console.log(res);// new Promise()
    res.then(res => {
      console.log(res);
      // if (res.code === 200) {
      //   console.log(res.data);
      // }
    }).catch(err => {
      console.log(err);
    })
  </script>
</body>


</html>